<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/music.css" />
	</head>
	<body>
	  <div class="wrap">
		  <div class="top">
		  	<img src="./img/music.jpg" class="top_img">
		  	<div class="wenzi_cover">
		  		<div class="wenzi">
		  			<div class="wenzi_top">音乐盒</div>
		  			<div class="wenzi_bottom" align="center">总归还是会有人用最质朴的方式喜欢你，不是套路，也不是撩你，
					<div>
						是那种，好喜欢你啊，想对你越来越好。
					</div>
					</div>
		  		</div>
		  	</div>
		  </div>
	    <div class="play_wrap" id="player">
	      <div class="search_bar">
			<div class="search_bar_text">
				<p>休闲一听</p>
			</div>
			
	        <!-- 搜索歌曲 -->
	        <input type="text" placeholder="输入要搜索的Music" autocomplete="off" v-model='query' @keyup.enter="searchMusic" />
	      </div>
	      <div class="center_con">
	        <!-- 搜索歌曲列表 -->
	        <div class='song_wrapper' ref='song_wrapper'>
	          <ul class="song_list">
	            <li v-for="item in musicList">
	              <!-- 点击放歌 -->
	              <a href="javascript:;" @click='playMusic(item.id)'></a>
	              <b>{{item.name}}</b>
	              <span>
	                <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
	              </span>
	            </li>
	
	          </ul>
	          <img src="https://i.loli.net/2020/03/23/dor23bhZtIvK17X.png" class="switch_btn" alt="">
	        </div>
	        <!-- 歌曲信息容器 -->
	        <div class="player_con" :class="{playing:isPlay}">
	          <img src="https://i.loli.net/2020/03/23/gZHko2WlpJNcGPv.png" class="play_bar" />
	          <!-- 黑胶碟片 -->
	          <img src="https://i.loli.net/2020/03/23/hQPuH4gNRx7XayI.png" class="disc autoRotate" />
	            <img :src="musicCover" class="cover autoRotate" />
	        </div>
	        <!-- 评论容器 -->
	        <div class="comment_wrapper" ref='comment_wrapper'>
	          <h5 class='title'>热门留言</h5>
	          <div class='comment_list'>
	
	            <dl v-for="item in hotComments">
	              <dt>
	                <img :src="item.user.avatarUrl" alt="" />
	              </dt>
	              <dd class="name">{{item.user.nickname}}</dd>
	              <dd class="detail">
	                {{item.content}}
	              </dd>
	            </dl>
	          </div>
	          <img src="https://i.loli.net/2020/03/23/dor23bhZtIvK17X.png" class="right_line">
	        </div>
	      </div>
	      <div class="audio_con">
	        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>				
	      </div>
	     <div class="video_con" v-show="isShow">
	     	<video ref='video' :src="mvUrl" controls="controls" autoplay></video>
	     	<div class="mask" @click="hide"></div>
	     </div>
	    </div>
	  </div>
	  <!-- 官网提供的axios 在线地址 -->
	  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	 <!-- 挂载js -->
	 <script src="js/music.js" type="text/javascript" charset="utf-8"></script>
	
	</body>
</html>
